<template>
  <div class="app-container">
    <div class="filter-container" id="filter-container-Form-complete-task">
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="taskList"
      border
      highlight-current-row
      :height="tableHeight"
      style="width: 100%;"
    >
      <el-table-column align="center" type="index" width="60" label="序号">
        <template slot-scope="scope">
          <span> {{(listQuery.page - 1) * listQuery.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="任务ID"
        prop="taskId"
        align="center"
        min-width="100"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.taskId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="任务名称"
        prop="taskName"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.taskName }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="流程实例ID"
              prop="procInstId"
              align="center"
              :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstId }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="流程实例名称"
              prop="procInstName"
              align="center"
              :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstName }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="发起人ID"
              prop="procInstStartUserId"
              align="center"
              :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstStartUserId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程发起时间"
        prop="procInstStartTime"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstStartTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程状态"
        prop="processStatus"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.processStatus }}</span>
        </template>
      </el-table-column>

      <!--操作Button + 页面级权限控制:hasPermission -->
      <el-table-column label="操作" align="center" min-width="130">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleProcImage(row)">流程图</el-button>
          <el-button type="primary" size="mini" @click="handleVerifyTask(row)">详细</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="流程图" :visible.sync="dialog4ProcImage" width="60%">
      <TmptFlowImage ref="tmptFlowImage" :procInstId="procInstId" />
    </el-dialog>


    <el-dialog title="详细" :visible.sync="dialog4Verify">
      <TmptDynamicFormApprove ref="tmptDynamicFormApprove" :taskId="taskId" :isHisTask="1"/>
    </el-dialog>

  </div>
</template>

<script>
import {listMyCompleteTask} from './api/dynamicApi'
import TmptFlowImage from './tmpt-flow-image'
import TmptDynamicFormApprove from "@/views/flow/act/task/tmpt-dynamic-form-approve";
import Pagination from "@/components/Pagination/index";
import {resizeTableHeight} from "@/utils";

export default {
    name: 'TmptMyCompleteTask',
    components: {Pagination, TmptFlowImage,TmptDynamicFormApprove},
    data() {
        return {
            tableKey:'',
            taskList:[],
            listLoading:false,
            dialog4ProcImage: false,
            dialog4Verify: false,
            procInstId: undefined,
            taskId: undefined,
            listQuery: {
              page: 1,
              limit: 20,
              sort: '-id'
            },
            total: 10,
            tableHeight:0, // 表格高度
        }
    },
    computed: {
    },
    mounted() {
        // 浏览器、元素大小变化时，动态调整table高度
        resizeTableHeight(this, 'filter-container-Form-complete-task',180)
        this.getList();
    },
    methods: {
        getList() {
            this.listLoading = true
            // 重组查询条件
            const params = Object.assign({}, this.listQuery)
            listMyCompleteTask(params).then(r => {
                this.listLoading = false
                if (!r.success) {
                    this.notify(r)
                    return
                }
                this.taskList = r.list
                this.total = r.total
            })
        },
        handleProcImage(row) {
            this.dialog4ProcImage = true
            this.procInstId = row.procInstId
        },
        handleVerifyTask(row) {
          this.dialog4Verify = true
          this.taskId = row.taskId
          /*const task = {}
          task.id = row.taskId
          //可以加变量
          //task.formData = {}
          completeTask(task).then(r => {
              this.notify(r)
              if (r.success) {
                  this.list()
              }
          })*/
        }
    }
}
</script>
